<template>
	<!-- #ifdef MP-KUAISHOU -->
		<view class="chooseBox" style="padding-bottom: env(safe-area-inset-bottom);">
			<view @click="isIndex" class="chooseLeft">
				<image style="width: 40rpx;height: 33rpx;margin-bottom: 4rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomBack.png"></image>
				<view class="isTitle">首页</view>
			</view>
			<view class="chooseMid">
				<view class="flex-set"  @click="isLast">
					<image style="width: 36rpx;height: 35rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomLast.png"></image>
					<text class="icon-text">上一集</text>
				</view>
				<image @click="pauseClick" style="width: 60rpx;height: 60rpx;margin: 0 80rpx 40rpx;" :src="isShowBtnPlay ? 'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomPlay.png' : 'https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomPause.png'"></image>
				<view class="flex-set" @click="isNext">
					<image style="width: 37rpx;height: 35rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomNext.png"></image>
					<text class="icon-text">下一集</text>
				</view>
			</view>
			<view @click="chooseSeq" class="chooseRight">
				<image style="width: 39rpx;height: 28rpx;margin-bottom: 4rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/icon_bottomChoose.png"></image>
				<view class="isTitle">选集</view>
			</view>
		</view>
	<!-- #endif -->
	<!-- #ifdef MP-TOUTIAO -->
		<view class="chooseBoxTT" :style="{height:isIpx ? '120rpx' : '90rpx'}">
			<view @click="chooseSeq" class="isBtnBox" style="background-color:#575757;margin-bottom:env(safe-area-inset-bottom);">
				<view class="isBtnBoxLeft">
					<image style="width:35rpx;height: 28rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_layes1.png"></image>
					<view class="isName clamp">{{compInfo.title || ''}}·当前第{{sequence + 1}}集/共{{compInfo.updateOfEpisodes || '???'}}集</view>
				</view>
				<image style="width: 32rpx;height: 18rpx;margin-right: 41rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/icon_chooseArrow.png"></image>
			</view>
		</view>
	<!-- #endif -->
</template>

<script>
	export default {
		name:"chooseBoxIndexNew",
		props:{
			sequence:{
				type:Number,
				default:2,
			},
			compInfo: {
				type: Object,
				default: {}
			},
			isShowBtnPlay:{
				type:Boolean
			},
			white:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				isIpx: getApp().globalData.isLongScreen || false
			};
		},
		methods:{
			pauseClick(){
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_be'
				});
				if(this.isShowBtnPlay) {
					this.$emit('videoPlay');
				}else {
					this.$emit('videoPause');
				}
			},
			isIndex(){
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_p1_dn'
				});
				uni.switchTab({
					url: '/pages/fx_xjc/fx_xjc'
				});
			},
			async isLast(){
				await ks.vibrateShort()
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_PartOne'
				});
				this.$emit('isLast');
			},
			async isNext(){
				await ks.vibrateShort()
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_ nextset'
				});
				this.$emit('isNext');
			},
			chooseSeq(){
				this.$uma && this.$uma.trackEvent('Ume_page2_control', {
					name: 'Ume_page2_control_opt'
				});
				this.$emit('chooseSeq');
			}
		}
	}
</script>

<style scoped lang="scss">
	.isName{
		font-size: 28rpx;
		color: white;
		padding-left: 20rpx;
	}
	.isBtnBox{
		.isBtnBoxLeft{
			margin-left: 45rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		width: 710rpx;
		height: 88rpx;
		margin: 0 auto;
		// background: #3E3E44;
		background: #575757;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	.chooseLeft,.chooseRight{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.chooseLeft{
		margin-left: 51rpx;
	}
	.chooseRight{
		margin-right: 51rpx;
	}
	.chooseMid{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.isTitle{
		font-size:26rpx;
		color: #949494;
		margin-top: 12rpx;
	}
	.chooseBoxTT{
		display: flex;
		height: 130rpx;
		width: 100vw;
		align-items: center;
		position: fixed;
		z-index: 99;
		bottom: 0;
		justify-content: space-between;
	}
	.chooseBox{
		display: flex;
		height: 130rpx;
		width: 100vw;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 98;
		justify-content: space-between;
	}

	.flex-set {
		display: flex;
		flex-direction: column;
		align-items: center;
		.icon-text {
			margin-top: 12rpx;
			color: #949494;
		}
	}
</style>
